<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>修改密码</title>
		<link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="/css/passwordUpdate.css"/>
		<script src="/js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container-fluid table-bordered" id="bgcImg">
			<div  class="bgcHeader col-lg-12">
				<!-- part1 修改密码 -->
				<!-- <div>
					<h1>&nbsp;</h1>
				</div> -->
				<div class="col-lg-12">
					<h1 class="text-center text-black part1-textSet ">修改密码</h1>
				</div>
				<!-- <div>
					<h1>&nbsp;</h1>
				</div> -->
			</div>
			<!-- part2  修改密码提醒-->
			<div class="col-lg-6 table-bordered">
				<div class="col-lg-12">
					<p>密码强度建议</p>
				</div>
				<div class="col-lg-12">
					<h4>- 密码长度最小为6位;</h4>
				</div>
				<div class="col-lg-12">
					<h4>- 高强度密码必须包包含一下4种中的3种:</h4>
					
					<ul>
						<li>1.大写字母</li>
						<li>2.小写字母</li>
						<li>3.数字</li>
						<li>4.特殊符号,如$、*、%...</li>
					</ul>
				</div>
				
			</div>
			
			<!-- 右侧修改内容 -->
			
			<div class="col-lg-6">
				<form class="form-horizontal" role="form">
				  <div class="form-group">
				    <label for="firstname" class="col-sm-2 control-label">原密码</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" id="firstname" placeholder="请输入原密码">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="lastname" class="col-sm-2 control-label">新密码</label>
				    <div class="col-sm-10">
				      <input type="password" class="form-control" id="lastname" placeholder="请输入新密码">
				    </div>
				  </div>
				  <div class="form-group">
				    <label for="lastname" class="col-sm-2 control-label">确认密码</label>
				    <div class="col-sm-10">
				      <input type="password" class="form-control" id="lastname" placeholder="请输入确认密码">
				    </div>
				  </div>
				  
				  <!-- 验证码 -->
				  <div class="col-sm-2">
				  	
				  </div>
				   <div class="code">
				          <!-- <span class="v_logo"></span> -->
				       <!-- <div class="col-lg-6"> -->
							<input type="text" value="" placeholder="请输入验证码" class="input-val ipt form-control col-lg-6" />
				       <!-- </div> -->
					   <!-- <p>&nbsp;</p> -->
					   <!-- <div class="col-lg-4"> -->
							<canvas id="canvas" width="100" height="40"></canvas>
							<p>&nbsp;</p> 
					   <!-- </div> -->
				          <!-- <input type="text" value="" placeholder="请输入验证码" class="input-val ipt form-control" /> -->
						  
				          <!-- <canvas id="canvas" width="100" height="43"></canvas> -->
				   
				          <!-- <input type="button" id="submit" value="提交" /> -->
				   
				    </div>
					<!-- <div class="col-lg-1">
						<h5>&nbsp;</p>
					</div> -->
				  
				  
				  <div class="form-group">
				    <div class="col-sm-offset-2 col-sm-10">
				      <button type="submit" class="btn btn-success btn-block" id="submit">确认</button>
				    </div>
				  </div>
				</form>
				
				<div class="col-lg-offset-2">
					<a href="#">其他方式</a>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
	    var show_num = [];
	    $(function () {
	        draw(show_num);//加载验证码
	 
	        //看不清楚重新获取验证码
	        $("#canvas").on('click', function () {
	            draw(show_num);
	        })
	 
	        $("#submit").click(function () {
	            check(); //数据提交前先检查验证码是否填写正确
	        })
	    })
	 
	    function draw(show_num) {
	        var canvas_width = $('#canvas').width();
	        var canvas_height = $('#canvas').height();
	        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
	        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
	        canvas.width = canvas_width;
	        canvas.height = canvas_height;
	        var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
	        var aCode = sCode.split(",");
	        var aLength = aCode.length;//获取到数组的长度
	 
	        for (var i = 0; i <= 3; i++) {
	            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
	            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
	            var txt = aCode[j];//得到随机的一个内容
	            show_num[i] = txt.toLowerCase();
	            var x = 10 + i * 20;//文字在canvas上的x坐标
	            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
	            context.font = "bold 23px 微软雅黑";
	            context.translate(x, y);
	            context.rotate(deg);
	            context.fillStyle = randomColor();
	            context.fillText(txt, 0, 0);
	            context.rotate(-deg);
	            context.translate(-x, -y);
	        }
	        for (var i = 0; i <= 5; i++) { //验证码上显示线条
	            context.strokeStyle = randomColor();
	            context.beginPath();
	            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
	            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
	            context.stroke();
	        }
	        for (var i = 0; i <= 30; i++) { //验证码上显示小点
	            context.strokeStyle = randomColor();
	            context.beginPath();
	            var x = Math.random() * canvas_width;
	            var y = Math.random() * canvas_height;
	            context.moveTo(x, y);
	            context.lineTo(x + 1, y + 1);
	            context.stroke();
	        }
	    }
	 
	    function randomColor() {//得到随机的颜色值
	        var r = Math.floor(Math.random() * 256);
	        var g = Math.floor(Math.random() * 256);
	        var b = Math.floor(Math.random() * 256);
	        return "rgb(" + r + "," + g + "," + b + ")";
	    }
	 
	 
	 
	    function check() {
	        var val = $(".input-val").val().toLowerCase();
	        var num = show_num.join("");
	 
	        if (val == "") {
	            alert("请输入验证码");
	            return false;
	        } else if (val != num) {
	            alert('验证码错误！请重新输入！');
	            $(".input-val").val('');
	            setTimeout(function () {
	                draw(show_num);
	            }, 1000)
	 
	            return false;
	        }
	        return true;
	    }
	</script>
</html>
